<template>
  <!-- 报价 -->
  <div class="">
    <!-- 头部 -->
    <div class="top">
      <div class="left"><img src="/logo.png" alt="" /></div>
      <div class="mid"><span>装修报价</span></div>
      <div class="right">
        <p>
          <i class="iconfont top-i icon-user"></i> <br /><span class="r-zi"
            >我的</span
          >
        </p>
        <p>
          <i class="iconfont top-i icon-nav"></i> <br /><span class="r-zi"
            >导航</span
          >
        </p>
      </div>
    </div>
    <!-- 头部图片 -->
    <div class="headerimg">
      <img src="/切图/10quoted.jpg" alt="" />
    </div>
    <!-- 内容报价 -->
    <h3>房先森10S报价</h3>
    <div class="content">
      <!-- 内容表单 -->
      <van-cell-group>
        <van-field placeholder="请填写建筑面积" />
      </van-cell-group>
      <van-collapse>
        <van-collapse-item title="现代" name="1"></van-collapse-item>
        <div class="collapse">
          <van-collapse-item
            title="1室"
            name="2"
            class="one"
          ></van-collapse-item>
          <van-collapse-item
            title="1厅"
            name="3"
            class="two"
          ></van-collapse-item>
        </div>
        <div class="collapses">
          <van-collapse-item title="1厨" name="4"></van-collapse-item>
          <van-collapse-item title="1卫" name="5"></van-collapse-item>
          <van-collapse-item title="1阳台" name="6"></van-collapse-item>
        </div>
        <button>立即申请</button>
      </van-collapse>
      <!-- 装修报价 -->
    </div>
    <div class="zxcontent">
      <div class="zxbox">
        <h5>全包装修总价: <span style="color: #fe9a9f">81,889,78</span>元</h5>
        <h4>您还可以选择</h4>
        <p>
          房先森装修半包套餐价,<span style="color: #fdc752">399</span>元/平米
        </p>
        <span class="zbBtn">预约399套餐</span>
      </div>
    </div>
    <!-- 尾部 -->
    <!-- <div class="footer">
      <h3>我们可以为您提供</h3>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div> -->
    <section class="progress bg-white progress-service">
      <figure>
        <img src="/1.png" alt="" class="img" />
      </figure>
    </section>
    <article class="bg-white">
      <ul class="flex">
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-app"></i>
          </span>
          <p class="title">产品系列</p>
          <p class="tips">半包、全包套餐、全屋定制及个性化升级</p>
        </li>
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-price"></i>
          </span>
          <p class="title">0 元装修</p>
          <p class="tips">与建行合作装修贷款,实现 0 元开启装修</p>
        </li>
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-live"></i>
          </span>
          <p class="title">工地直播</p>
          <p class="tips">工地巡检照片、360 度全景节点验收</p>
        </li>
      </ul>
      <ul class="flex no-border">
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-preferential"></i>
          </span>
          <p class="title">合作优惠</p>
          <p class="tips">正品材料工厂直供,F2C 让利用户</p>
        </li>
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-construction-site"></i>
          </span>
          <p class="title">参观工地</p>
          <p class="tips">随时预约参观工地,零距离感受施工工艺</p>
        </li>
        <li class="inner">
          <span class="bg-cercle">
            <i class="iconfont icon-protection"></i>
          </span>
          <p class="title">售后保障</p>
          <p class="tips">整装 2 年质保,隐蔽水电工程 10 年质保</p>
        </li>
      </ul>
    </article>
        <div class="foot-tips">
      <p>
        房先森互联网家装有别于传统装修公司与其他装修中介平台，以自营模式整合设计师与项目经理，利用互联网将工地进行在线全景直播，通过去中间环节，提供装修套餐
        + 个性化定制服务。
      </p>
    </div>
    <footer class="footer-nav">
      <p>
        <i class="iconfont icon-hot-line green"></i>
        <a href="">服务热线:17757169861</a>
      </p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

<style lang='scss' scoped>
.top {
  background-color: #fff;
}
.top,
.right {
  display: flex;
  justify-content: space-between;
}
.left {
  img {
    margin-left: 18px;
    margin-top: 16px;
    width: 120px;
    margin-bottom: 16px;
  }
}
.mid {
  span {
    margin-top: 22px;
    display: inline-block;
    font-size: 20px;
  }
}
.right {
  p {
    margin: 5px 10px;
  }
  text-align: center;
  .r-zi {
    font-size: 22px;
    color: #999;
  }
  .top-i {
    font-size: 22px;
    color: #999;
    margin-bottom: 18px;
  }
}
.headerimg {
  width: 100%;
  height: 100px;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
  }
}
h3 {
  text-align: center;
  font-weight: normal;
  height: 60px;
  // width: 95%;
  // margin: 0 auto;
  line-height: 60px;
  border-bottom: 1px dashed #d7d7d7;
  background-color: #fff;
}
.content {
  padding: 36px;
  background-color: #fff;
  .van-cell-group,
  .van-collapse-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }
  .collapse {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .van-collapse-item {
      flex-basis: 50%;
      margin-right: 10px;
      border: 1px solid #ccc;
    }
  }
  .collapses {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .van-collapse-item {
      flex-basis: 33%;
      margin-right: 10px;
      border: 1px solid #ccc;
    }
  }
  button {
    background-color: #feb722;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #fee4b2;
    font-size: 18px;
    border: none;
  }
}
.zxcontent {
  width: 100%;
  height: 220px;
  background-color: #fff;
  .zxbox {
    width: 95%;
    margin: 0 auto;
    border: 1px dashed #99e1c6;
    height: 260px;
    h5 {
      margin: 25px auto 25px;
      text-align: center;
      color: #bcbcbc;
    }
    h4 {
      text-align: center;
      color: #a5a5a5;
      margin-bottom: 18px;
    }
    p {
      text-align: center;
      color: #bcbcbc;
      margin-bottom: 18px;
    }
    .zbBtn {
      margin-left: 30px;
      height: 40px;
      border: 1px solid #37c794;
      text-align: center;
      color: #37c794;
      background-color: #fff;
      display: inline-block;
      width: 80%;
      line-height: 40px;
      border-radius: 8px;
    }
  }
}
.progress-service{
  width: 100%;
  height: 60px;
  img{
    width: 100%;
    height: 100%;
  }
}
.bg-white {
  background: #fff;
  .progress-service ul {
    border-bottom: 1px solid #eaeaea;
  }
  .progress-service ul li {
    padding: 0.3rem 0.1rem;
    border-right: 1px solid #eaeaea;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .flex a,
  .flex li {
    width: 100%;
    display: inline-block;
    flex: 1;
    text-align: center;
    .bg-cercle {
      border-width: 1px;
      .bg-cercle {
        width: 160px;
        height: 160px;
        display: inline-block;
        border-radius: 50%;
        border: 3px solid #2bb281;
        margin-bottom: 0.2rem;
        i{
          font-size: 25px;
        }
      }
      .progress-service .title {
        margin-bottom: 0.15rem;
        font-size: 14px;
      }
      .progress-service .tips {
        font-size: 10px;
        color: #666;
      }
    }
  }
}
.footer-nav {
  padding: 0.3rem
;
  margin-top: 0.3rem
;
  background: #fff;
  font-size: 14px;
  text-align: center;
  color: #999;
}
.footer-nav p {
  margin-bottom: 0.2rem
;
}
.flex {
  width: 100%;
  display: flex;
}
.flex a, .flex li {
  width: 100%;
  display: inline-block;
  flex: 1;
  text-align: center;
}.green {
   color: #2bb281;
 }
.footer-nav p.copyright {
  margin-top: 0.3rem
;
  padding-top: 0.3rem
;
  border-top: 1px
  solid #eaeaea;
}
</style>
